<template>
    <div class="table">
        <div class="crumbs">
            <Breadcrumb>
                <BreadcrumbItem ><Icon type="ios-cart" /> 检测服务</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card>
            <Row :gutter="20">
                <Col :span="3">
                    <Input v-model="params.title_like" placeholder="服务名称" class="handle-input mr10" @keyup.enter.native="search"></Input>
                </Col>
                <Col :span="3">
                    <Input v-model="params.admin_name_like" placeholder="添加人" class="handle-input mr10" @keyup.enter.native="search"></Input>
                </Col>
                <Col :span="3">
                    <Select v-model="params.cate_id" placeholder="选择分类" clearable filterable @on-change="search">
                        <Option :key="id" v-for="(title, id) in cate" :value="id">{{title}}</Option>
                    </Select>
                </Col>
                <Col :span="9">
                    <Button type="primary" icon="md-search" @click="search">搜索</Button>
                    <Button type="info" icon="md-home" @click="reset">重置</Button>
                    <Button type="success" icon="md-refresh" @click="add">添加检测服务</Button>
                    <Button type="info" icon="md-refresh" @click="tableSetting = true">配置字段</Button>
                </Col>
            </Row>
        </Card>
            
        <Card style="margin-top: 20px;">
            <Table :columns="columns2" :data="tableData" :loading="loading" stripe border highlight-row @on-sort-change="sortChange"></Table>
            <Page
                :total="total"
                :current="params.page"
                :page-size="params.size"
                :page-size-opts="[10,15,20,50,100,300]"
                show-elevator
                show-sizer
                show-total
                transfer
                @on-change="handleCurrentChange"
                @on-page-size-change="handleSizeChange"
            />
        </Card>

        <tableSetting :resColumn="resColumn"
            :selectColumns="selectColumns"
            :name="cacheKey+'_table_setting'"
            :show="tableSetting"
            @settingHide="settingHide"
            @initTable="initTable"
            @resetTable="resetTable"
        >
        </tableSetting>
    </div>
</template>

<script>
    //默认搜索参数
    let module = 'product';
    export default {
        components:{
            tableSetting: require('../common/tablesetting.vue'),
        },
        data() {
            return {
                url: pub.apiDomain + module,
                cacheKey: module + '_list',
                tableData: [],
                total: 0,  //总条数
                loading: true,
                cate:{},//分类
                tableSetting: false,
                //复制一份dft_params,以便重置时可以使用dft_params, 如果用params: dft_params则是引用,params变化时会污染dft_params
                params: {
                    prop: 'id',   //排序字段
                    order: 'asc',  //desc 正/反序
                    page: 1,
                    size: pub.pageSize,
                },
                //原始字段
                columns: [
                    {title: 'id', key: 'id',sortable: 'custom', sortType: 'desc'},
                    {title: '检测服务', key: 'title',sortable: true, tooltip:true},
                    {title: '分类', key: 'cate_id',sortable: true},
                    {title: '添加人', key: 'admin_name',sortable: true},
                    {title: '添加日期', key: 'add_dt',sortable: true},
                    {
                        title: '操作',
                        width: 200,
                        key: 'action',
                        render: (h, params) => {
                            return <span>
                                <i-button type="primary" icon="ios-create-outline" style="margin-right:6px;" onClick={(e)=>{this.handleEdit(params.index, params.row)}}>编辑</i-button>
                                <i-button type="error" icon="md-trash" onClick={(e)=>{this.remove(params.index, params.row.id)}}>删除</i-button>
                            </span>
                        }
                    },
                ],
                columns2:[], //实际渲染字段
                resColumn:[],//原始字段列表
                selectColumns: [],//选中字段列表
            }
        },
        mounted(){
            //接收站点变更事件
            this.bus.$on('change_site', () => {
                this.getData();
            });
        },
        created(){
            //pub.setCache(this.cacheKey, null);    //禁用缓存
            for(let k in this.columns) this.resColumn.push(this.columns[k].title);
            this.columns2 = pub.getColumns(this.cacheKey+'_table_setting', this.columns);    //根据缓存修改字段，如果没有缓存不做修改
            for(let k in this.columns2) this.selectColumns.push(this.columns2[k].title);

            //还原列表状态
            let params = pub.getCache(this.cacheKey);
            if(params) {
                this.params = params;
            }
            this.getData();   //由于设置了默认排序,有排序字段会自动触发sortChange操作加载列表
            this.$axios.get(pub.apiDomain + 'cate/map/module/'+module).then(res => {
                this.cate = res.d;
            });
        },
        methods: {
            //添加
            add(){
                this.$router.push('/'+module+'_form/add');
            },
            handleCurrentChange(val){
                this.params.page = val;
                this.getData();
            },
            handleSizeChange(val){
                this.params.size = val;
                this.getData();
            },
            //加载内容：在翻页或搜索后
            getData(){
                this.loading = true;
                this.$axios.post(this.url + '/ls', this.params).then(res => {
                    this.tableData = res.d.data;
                    this.total = res.d.total;
                    this.loading = false;
                    //保存列表状态
                    pub.setCache(this.cacheKey, this.params);
                });
            },
            //排序,
            sortChange (column){
                this.params.prop = column.key;
                this.params.order = column.order;
                this.getData();
            },
            //搜索
            search(){
                this.getData();
            },
            //重置
            reset(){
                this.params = {prop: 'id', order: 'asc', page: 1,size: pub.pageSize};
                this.getData();
            },
            //编辑
            handleEdit(index, row) {
                this.$router.push('/'+module+'_form/'+row.id);
            },
            //删除
            remove(i, id) {
                if(!confirm('确定删除吗？')) return false;
                this.$axios.get(this.url + '/del/id/' + id).then(res => {
                    this.$Message.success('删除成功');
                    this.getData();
                });
            },
            //字段配置，关闭回调事件
            settingHide(){
                this.tableSetting = false;
            },
            //修改字段后重新初始化表格
            initTable(){
                this.columns2 = pub.getColumns(this.cacheKey+'_table_setting', this.columns);    //根据缓存修改字段，如果没有缓存不做修改
                this.tableSetting = false;
            },
            //重置表格
            resetTable(){
                this.columns2 = this.columns;
                this.resColumn = [];
                for(let k in this.columns) this.resColumn.push(this.columns[k].title);
                this.selectColumns = this.resColumn;
                pub.setCache(this.cacheKey+'_table_setting', null);
                this.settingHide();
            },
        }
    }
</script>